<template>
    <div class="approval-container">
      <!-- 搜索条件区域 -->
      <div class="search-wrapper">
        <el-form :inline="true" :model="searchForm" ref="searchForm" class="search-form" label-width="85px"
          style="text-align: left">
          <div>
            <el-row>
              <el-col :span="6">
                <el-form-item label="订单编号" prop="orderCode">
                  <el-input v-model="searchForm.orderCode" placeholder="订单编号" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="text-align: center;">
                <el-form-item label="员工账号" prop="userName">
                  <el-input v-model="searchForm.userName" placeholder="员工账号" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="text-align: center;">
                <el-form-item label="员工昵称" prop="nickName">
                  <el-input v-model="searchForm.nickName" placeholder="员工昵称" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="text-align: right;">
                <el-form-item label="用餐时间" prop="date">
                  <!-- <el-input v-model="searchForm.date" placeholder="用餐时间" clearable></el-input> -->
                  <el-date-picker v-model="searchForm.date" type="date" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
  
          <div style="margin-top: 10px;">
            <el-row>
              <el-col :span="6">
                <el-form-item label="就餐地点" prop="siteName">
                  <el-select v-model="searchForm.siteName" clearable placeholder="请选择" style="width: 100%;">
                    <el-option v-for="(item, index) in zhand" :key="index" :label="item.siteName" :value="item.siteName">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="text-align: center;">
                <el-form-item label="开始日期" prop="date">
                  <el-date-picker v-model="searchForm.params.beginTime" type="date" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="text-align: center;">
                <el-form-item label="结束日期" prop="date">
                  <el-date-picker v-model="searchForm.params.endTime" type="date" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="text-align: right;">
                <div class="search-actions">
                  <el-button style="background-color: #4C6EE2;color: white;" size="small"
                    @click="handleSearch">搜索</el-button>
                  <el-button size="small" @click="resetSearch">重置</el-button>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
  
      <!-- 审批状态筛选 -->
      <div class="status-filter" style="display: flex;justify-content: space-between;">
        <el-radio-group v-model="radio" style="margin-top: 9px;margin-left: 17px;" @input="inputGroup">
          <el-radio :label="1">全部</el-radio>
          <!-- <el-radio :label="2">已下单</el-radio>
          <el-radio :label="3">未取餐</el-radio> -->
        </el-radio-group>
        <div>
          <el-button type="warning" size="small" plain icon="el-icon-download" @click="handleExport">导出</el-button>
        </div>
      </div>
  
      <!-- 审批数据表格 -->
      <div class="table-wrapper">
        <el-table :data="tableData" style="width: 100%" v-loading="loading" :header-cell-style="{ background: '#f8f8f9' }"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center"></el-table-column>
        <el-table-column prop="orderCode" label="订单编号"></el-table-column>
        <el-table-column prop="userName" label="员工账号" align="left"></el-table-column>
        <!-- <el-table-column prop="nickName" label="员工昵称" align="left">
        </el-table-column> -->
        <!-- <el-table-column prop="date" label="用餐时间" align="left">
        </el-table-column> -->
        <el-table-column prop="content" label="变更内容" align="left">
          <template slot-scope="scope">
            <div v-html="scope.row.content">

            </div>
          </template>
        </el-table-column>
        <el-table-column prop="totalAmount" label="订单金额" align="right">
        </el-table-column>
        <el-table-column prop="actualAmount" label="实付金额" align="right">
        </el-table-column>
        <el-table-column prop="type" label="取餐方式" align="left">
          <template slot-scope="scope">
            {{ scope.row.type == 0 ? "堂食" : "配送" }}
          </template>
        </el-table-column>
        <el-table-column prop="siteName" label="就餐地点" align="left">
        </el-table-column>
        <el-table-column prop="phone" label="联系方式" align="left">
        </el-table-column>
          <el-table-column prop="date" label="用餐时间" align="left">
        </el-table-column>
        <el-table-column prop="changeDate" label="变更时间" align="left">
        </el-table-column>
        <el-table-column prop="createTime" label="下单时间" align="left">
        </el-table-column>
        <el-table-column label="操作" width="150" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="picked(scope.row)"style="color: #4C6EE2;"
              >查看详情</el-button>
          </template>
        </el-table-column>
        </el-table>
  
        <!-- 分页 -->
        <div class="pagination">
          <pagination v-show="pagination.total > 0" :total="pagination.total" :page.sync="pagination.pageNum"
            :limit.sync="pagination.pageSize" @pagination="fetchData" />
        </div>
      </div>

      <el-dialog
  title="变更详情"
  :close-on-click-modal="false"
  :visible.sync="opens"
  width="506px"
  center
>
  <template #title>
    <div class="custom-dialog-title">
      <div style="display: flex;border-bottom: 1px solid rgba(0, 0, 0, 0.05);padding-bottom: 20px;padding-left: 30px;">
        <div style="background-color: #4C6EE2;border-radius: 20px;width: 4px;margin-right: 8px;height: 20px;margin-top: 6.5px;"></div>
        <span class="title-text" style="font-family: Source Han Sans;font-size: 20px;font-weight: 500;line-height: 31px;text-align: center;letter-spacing: normal;color: #3D3D3D;">详情</span>
      </div>
    </div>
  </template>
  <div class="detail-content" style="margin-left: 20px;">
    <el-row>
      <el-col :span="16">
        <div class="detail-item">
          <div class="detail-label">订单编号：</div>
          <div class="detail-value">{{ form.orderCode || '-' }}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="detail-item">
          <div class="detail-label">员工账号：</div>
          <div class="detail-value">{{ form.userName || '-' }}</div>
        </div>
      </el-col>
    </el-row>
    
    <el-row>
      <el-col :span="16">
        <div class="detail-item">
          <div class="detail-label">员工昵称：</div>
          <div class="detail-value">{{ form.nickName || '-' }}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="detail-item">
          <div class="detail-label">用餐时间：</div>
          <div class="detail-value">{{ form.date || '-' }}</div>
        </div>
      </el-col>
    </el-row>
    
    <el-row>
      <el-col :span="16">
        <div class="detail-item">
          <div class="detail-label">订单金额：</div>
          <div class="detail-value">{{ form.totalAmount || '-' }}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="detail-item">
          <div class="detail-label">实付金额：</div>
          <div class="detail-value">{{ form.actualAmount || '-' }}</div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16">
        <div class="detail-item">
          <div class="detail-label">取餐方式：</div>
          <div class="detail-value">{{ form.type == 0 ? "堂食" : "配送"}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="detail-item">
          <div class="detail-label">就餐地点：</div>
          <div class="detail-value">{{ form.siteName || '-' }}</div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="detail-item">
          <div class="detail-label">联系方式：</div>
          <div class="detail-value">{{ form.phone || '-' }}</div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="detail-item">
          <div class="detail-label">订单内容：</div>
          <div class="detail-value">{{ form.content || '-' }}</div>
        </div>
      </el-col>
    </el-row>
  </div>

  <div slot="footer" class="dialog-footer">
    <el-button @click="opens=false" style="background-color: white;color: #4C6EE2;border: 1px solid #4C6EE2;">关 闭</el-button>
  </div>
</el-dialog>
    </div>
  </template>
  
  <script>
  import { getList } from '@/api/changeSummary'
  import { listDept } from "@/api/system/station"
  
  export default {
    name: "DishManagement",
    dicts: ['food_eat_type'],
    data() {
      const [monday, sunday,now] = this.getCurrentWeekRange();
  
      return {
        opens: false,
        form: {
          
        },
        eatType: "1",
        deriveRadio: "1",
        exportTime: [
            this.formatDate(monday),
            this.formatDate(sunday),
        ],
        deriveVisible: false,
        zhand: [],
        searchForm: {
          foodCode: '',
          foodName: '',
          ingredients: '',
          price: '',
          originalPrice: '',
          createBy: '',
          createTime: '',
          params: {
            beginTime: this.formatDate(now),
            endTime:this.formatDate(now)
          }
        },
        radio: 1,
        loading: false,
        tableData: [],
        multipleSelection: [],
        pagination: {
          pageNum: 1,
          pageSize: 10,
          total: 0
        },
        dialogTitle: '导出订单',
        submitting: false
      }
    },
    created() {
      this.fetchData()
      this.zhandian()
    },
    methods: {
      picked(val) {
        
        this.opens = true;
        this.form = val;
      },
      getCurrentWeekRange() {
        const now = new Date();
        const day = now.getDay(); // 0（周日）到6（周六）
        
        // 计算本周一
        const monday = new Date(now);
        monday.setDate(now.getDate() - (day === 0 ? 6 : day - 1));
        
        // 计算本周日
        const sunday = new Date(monday);
        sunday.setDate(monday.getDate() + 6);
        
        return [monday, sunday,now];
      },
      formatDate(date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      },
      exportConfirmed() {
        this.downloads(`food/export/excel?startDate=${this.exportTime[0]}&endDate=${this.exportTime[1]}&type=${this.deriveRadio}&eatType=${this.eatType}`, {
          startDate: this.exportTime[0],
          endDate: this.exportTime[1],
          type: this.deriveRadio,
          eatType: this.eatType
        }, `订单导出${new Date().toISOString().slice(0, 10)}.xlsx`)
      },
      async zhandian() {
        const res = await listDept({
          pageNum: 1,
          pageSize: 99999999
        })
        this.zhand = res.rows
      },
      handleExport() {
        this.download('/change/order/changes/summary/export', {
        ...this.searchForm
      }, `变更汇总导出${new Date().toISOString().slice(0, 10)}.xlsx`)
        // this.deriveVisible = true;
      },
      getStatusType(status) {
        const statusMap = {
          '0': 'warning',  // 停用
          '1': 'success',  // 停用
          '2': 'danger', // 正常
          '3': 'warning', // 淘汰
          '4': 'info',     // 其他状态
          '5': 'info',     // 其他状态
        }
        return statusMap[status] || ''
      },
      getStatusText(status) {
        const statusTextMap = {
          '0': '待支付',
          '1': '已下单',
          '2': '已接单',
          '3': '配送中',
          '4': '已取餐',
          '5': '未取餐',
        }
        return statusTextMap[status] || '未知'
      },
      inputGroup() {
        if (this.radio == 2) {
          this.searchForm.status = '1'
        } else if (this.radio == 3) {
          this.searchForm.status = '5'
        } else {
          this.searchForm.status = ''
        }
        this.fetchData()
      },
      async fetchData() {
        this.loading = true
        try {
          const params = {
            ...this.searchForm,
            pageNum: this.pagination.pageNum,
            pageSize: this.pagination.pageSize
          }
          const data = await getList(params)
          this.tableData = data.rows
          this.pagination.total = data.total
        } catch (error) {
          console.error(error)
          this.$message.error('获取菜品列表失败')
        } finally {
          this.loading = false
        }
      },
      handleSearch() {
        this.pagination.pageNum = 1
        this.fetchData()
      },
      resetSearch() {
        this.$refs.searchForm.resetFields()
        this.radio = 1
        this.searchForm.status = ''
        this.handleSearch()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      }
    }
  }
  </script>
  
  <style scoped>
  .detail-item{
    display: flex;
    margin-top: 15px;
    font-size: 14px;
  }
  .detail-value{
    color: black;
  }
  .inline-form-item>>>.el-form-item__content {
    display: inline-block;
    margin-left: 10px !important;
  }
  
  .inline-form-item>>>.el-form-item__label {
    float: left;
    padding-right: 10px;
  }
  
  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    font-size: 25px;
  }
  
  ::v-deep .el-dialog {
    border-radius: 15px;
  }
  
  ::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
  }
  
  .approval-container {
    padding: 20px;
    background: #fff;
  }
  
  .search-wrapper {
    margin-bottom: 20px;
  }
  
  .search-form {
    display: flex;
    flex-direction: column;
  }
  
  .search-row {
    display: flex;
    margin-bottom: 15px;
  }
  
  .search-row .el-form-item {
    margin-right: 20px;
    margin-bottom: 0;
  }
  
  .search-actions {
    margin-left: auto;
  }
  
  .status-filter {
    margin-bottom: 15px;
  }
  
  .table-wrapper {
    margin-top: 20px;
  }
  
  .content-cell {
    padding: 5px 0;
  }
  
  .content-cell p {
    margin: 5px 0;
    line-height: 1.5;
  }
  
  ::v-deep .el-dialog__body {
    padding-top: 8px;
  }
  
  .pagination {
    margin-top: 20px;
    text-align: right;
  }
  
  .el-table::before {
    display: none;
  }
  
  .el-table {
    border: none;
  }
  
  .el-table /deep/ th {
    border-bottom: 1px solid #ebeef5;
  }
  
  .el-table /deep/ td {
    border-bottom: 1px solid #ebeef5;
  }
  
  .el-input-number {
    width: 100%;
  }
  
  ::v-deep .el-radio__input.is-checked .el-radio__inner {
    background-color: #4C6EE2;
    border: 1px solid #4C6EE2;
    color: black;
  }
  
  ::v-deep .el-radio__input.is-checked+.el-radio__label {
    color: black;
  }
  
  ::v-deep .el-form-item {
    margin-bottom: 8px;
    margin-right: 0;
  }
  
  ::v-deep .el-input--medium .el-input__inner {
    height: 32px;
    line-height: 32px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0);
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }
  
  ::v-deep .dialogN .el-input--medium .el-input__inner {
    height: 42px;
    line-height: 42px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0);
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }
  </style>